import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import FormInput from '../components/FormInput';
import SubmitButton from '../components/SubmitButton';
import { forgotPassword } from '../services/api';

const ForgotPassword: React.FC = () => {
    const navigate = useNavigate();
    const [email, setEmail] = useState('');
    const [error, setError] = useState('');
    const [success, setSuccess] = useState('');

    const handleForgot = async () => {
        try {
            await forgotPassword(email);
            setSuccess('重置链接已发送（前端跳转至重置页）');
            setTimeout(() => navigate('/reset-password'), 1000);
        } catch (err: any) {
            setError(err.response?.data?.error || '获取重置链接失败');
        }
    };

    return (
        <div className="auth-container">
            <h2>忘记密码</h2>
            <p>请输入您注册时使用的邮箱，我们将发送重置密码链接</p>
            {error && <p className="error">{error}</p>}
            {success && <p className="success">{success}</p>}
            <FormInput label="邮箱" placeholder="请输入注册邮箱" value={email} onChange={(e) => setEmail(e.target.value)} />
            <SubmitButton text="获取重置链接" onClick={handleForgot} />
            <p><a href="#" onClick={() => navigate('/login')}>返回登录</a></p>
        </div>
    );
};

export default ForgotPassword;